<template>
	<t-tabs class="bg-white h-full w-full" :defaultValue="tabsValue" :onChange="tabChange">
		<!-- 1：公司考勤表 -->
		<t-tab-panel :value="1" label="公司考勤表" v-if="isButtonAuthority('查看公司考勤表')">
			<t-calendar :controllerConfig="controllerConfig" :onMonthChange="companyMonthChange" style="border: none;">
				<div slot="cell" slot-scope="data" class="outerWrapper">
					<div :class="number(data)">{{ displayNum(data) }}</div>
					<template v-if="getShow(data)">
						<div :class="templateClass(data)">
							<!-- 上班人数 -->
							<div class="item" @click="handleClick(data.children[0])">
								<span :class="data.success"></span>
								{{data.c_office_number_title}}
								<span class="text-blue-700 mr-2 ml-2">{{data.c_office_number}}</span>
								人
							</div>
							<!-- 调休人数 -->
							<div class="item" @click="handleClick(data.children[1])">
								<span :class="data.warning"></span>
								{{data.c_rest_number_title}}
								<span class="text-orange-500 mr-2 ml-2">{{data.c_rest_number}}</span>
								人
							</div>
						</div>
					</template>
				</div>
			</t-calendar>
		</t-tab-panel>
		<!-- 2：部门考勤表 -->
		<t-tab-panel :value="2" label="部门考勤表" v-if="isButtonAuthority('查看本部门考勤表')">
			<t-calendar :controllerConfig="controllerConfig" :onMonthChange="departmentMonthChange" style="border: none;">
				<div slot="head" v-if="isButtonAuthority('查看其他部门考勤表')">
					<t-select v-model="departmentValue" :options="departmentOptions" class="w-60" :onChange="departmentValueChangr"/>
				</div>
				<div slot="cell" slot-scope="data" class="outerWrapper">
					<div :class="number(data)">{{ displayNum(data) }}</div>
					<template v-if="departmentShow(data)">
						<div :class="templateClass(data)">
							<!-- 上班人数 -->
							<div class="item" @click="handleClick(data.children[0])">
								<span :class="data.success"></span>
								{{data.c_office_number_title}}
								<span class="text-blue-700 mr-2 ml-2">{{data.c_office_number}}</span>
								人
							</div>
							<!-- 调休人数 -->
							<div class="item" @click="handleClick(data.children[1])">
								<span :class="data.warning"></span>
								{{data.c_rest_number_title}}
								<span class="text-orange-500 mr-2 ml-2">{{data.c_rest_number}}</span>
								人
							</div>
						</div>
					</template>
				</div>
			</t-calendar>
		</t-tab-panel>
		<!-- 3:个人考勤表 -->
		<t-tab-panel :value="3" label="个人考勤表" v-if="isButtonAuthority('查看个人考勤表')">
			<t-calendar :controllerConfig="controllerConfig" style="border: none;" :onMonthChange="userMonthChange">
				<div slot="head">
					<div class="flex">
						<t-select 
						class="w-60" 
						placeholder="请输入员工昵称" 
						filterable 
						:options="userOptions"
						v-model="userSelectValue"
						/>
						<t-button class="ml-2" @click="userSelectBtn" :disabled="userSelectValue ? false : true">确定</t-button>
					</div>
					<p class="text-gray-700 text-sm pt-2 pb-4">
						<span class="text-blue-700">{{uesrAttendanceInfo.nick_name}}</span>
						该轮考勤累计上班 
						<span class="text-orange-500">{{uesrAttendanceInfo.s_office_day}}</span> 
						天，累计加班 
						<span class="text-orange-500">{{uesrAttendanceInfo.s_overtime_day}}</span> 
						小时，已安排调休 
						<span class="text-orange-500">{{uesrAttendanceInfo.s_rest_day}}</span> 
						天，剩余可申请调休 
						<span class="text-orange-500">{{uesrAttendanceInfo.s_rest_all_day - uesrAttendanceInfo.s_rest_day}}</span> 
						天。（{{dayStr + ' - ' + lastDayStr}}）</p>
				</div>
				<div slot="cell" slot-scope="data" class="outerWrapper">
					<div :class="number(data)">{{ displayNum(data) }}</div>
					<template  v-if="userShow(data)">
						<div :class="templateClass(data)">
							<div class="item" v-if="data.userData.office_status == 0">
								<span class="zero success"></span>
								<span class="text-blue-700 mr-2 ml-2">上班</span>
							</div>
							<div class="item" v-if="data.userData.office_status == 1">
								<span class="zero restColor"></span>
								<span class="text-green-500 mr-2 ml-2">休息</span>
							</div>
							<div class="item" v-if="data.userData.overtime_status == 1">
								<span class="zero warning"></span>
								<span class="mr-2 ml-2">加班<span class="text-orange-500">{{data.userData.overtime_time}}</span>小时</span>
							</div>
						</div>
					</template>
				</div>
			</t-calendar>
		</t-tab-panel>
		<!-- 详情抽屉 -->
		<t-drawer :visible.sync="visible" header="详情" :onClickConfirm="onClickConfirm" :closeBtn="true">
			<p class="text-gray-400">日期</p>
			<div class="mb-4 p-4 bg-gray-50">
				<p class="text-gray-900">{{ drawerData[0].length > 0 ? drawerData[0][0].day_date : drawerData[0].day_date}}</p>
			</div>
			<p class="text-gray-400 mb-2">人员列表</p>
			<div v-for="(item, index) in drawerData" :key="index" class="mb-4 p-4 bg-gray-50"  v-if="drawerData[0].length > 0">
				<p class="text-gray-400">{{item[0].department_name}}</p>
				<div v-for="(itemList, indexList) in item" :key="indexList">
					<div class="text-gray-900">{{itemList.nick_name}}</div>
				</div>
			</div>
			<div v-for="(item, index) in drawerData" :key="index" class="mb-4 p-4 bg-gray-50" v-if="drawerData[0].length > 0 ? false : true">
				<div class="text-gray-900">{{item.nick_name}}</div>
			</div>
		</t-drawer>
	</t-tabs>
</template>

<script>
	import dayjs from 'dayjs'
	import { getUserId, getUserDepartmentId } from '@/unit/auth'
	import { isButtonAuthority } from '@/unit/buttonAuthority'
	const loot = require('@/unit/loot')

	export default {
		data() {
			return {
				controllerConfig: {
					mode: {
						visible: false
					}
				},
				CompanyAttendanceData: [],
				visible: false,
				drawerData: [[{day_date: ''}]],
				departmentData: [],
				departmentOptions: [
					{value: '1', label: '你好'}
				],
				departmentValue: '',
				departmentYearMonth: {
					year: dayjs().format('YYYY-MM-DD').slice(0, 4),
					month: parseInt(dayjs().format('YYYY-MM-DD').slice(5, 7)),
					department_id: ''
				},
				userData: [],
				uesrAttendanceInfo: {
					nick_name: '',
					s_date: '',
					s_office_day: 0,
					s_overtime_day: 0,
					s_rest_day: 0,
					s_rest_all_day: 6
				},
				userQuery: {
					year: dayjs().format('YYYY-MM-DD').slice(0, 4),
					month: parseInt(dayjs().format('YYYY-MM-DD').slice(5, 7)),
					user_id: getUserId()
				},
				userOptions: [],
				userSelectValue: '',
				tabsValue: 1
			};
		},
		computed: {
			// 当前年月日
			dayStr(){
				return this.uesrAttendanceInfo.s_date.slice(0, 4) + '.' +  this.uesrAttendanceInfo.s_date.slice(5, 7) + '.15'
			},
			// 下个年月日
			lastDayStr(){
				let str = ''
				if(this.uesrAttendanceInfo.s_date.slice(5, 7) == 12){
					str = (parseInt(this.uesrAttendanceInfo.s_date.slice(0, 4)) + 1) + '.01.14'
				} else {
					let month = parseInt(this.uesrAttendanceInfo.s_date.slice(5, 7)) + 1
					if(month < 10){
						month = '0' + month
					}
					str = this.uesrAttendanceInfo.s_date.slice(0, 4) + '.' + month + '.14'
				}
				return str
			}
		},
		methods: {
			// 权限审核
			isButtonAuthority(str){
				return isButtonAuthority(str)
			},
			// tab切换时触发
			tabChange(){
				let companyQuery = {
					year: dayjs().format('YYYY-MM-DD').slice(0, 4),
					month: parseInt(dayjs().format('YYYY-MM-DD').slice(5, 7))
				}
				this.getCompanyAttendance(companyQuery)
				this.getDepartmentList()
				this.userQuery = {
					year: dayjs().format('YYYY-MM-DD').slice(0, 4),
					month: parseInt(dayjs().format('YYYY-MM-DD').slice(5, 7)),
					user_id: getUserId()
				}
				this.userSelectValue = ''
				this.getUserAttendance(this.userQuery)
				this.getUserAttendanceStat(this.userQuery)
			},
			// 数字样式
			number(data){
				if(data.belongTo === 0){
					return 'number'
				} else {
					return 'gray-number'
				}
			},
			// 模板样式
			templateClass(data){
				if(data.belongTo === 0){
					return 'slotWrapper template'
				} else {
					return 'slotWrapper gray-template'
				}
			},
			// 点击用户选择按钮
			userSelectBtn(){
				this.userQuery.user_id = this.userSelectValue
				this.getUserAttendanceStat(this.userQuery)
				this.getUserAttendance(this.userQuery)
			},
			// 获取用户列表下拉框值
			getUserList(){
				this.$store.dispatch('attendance/getUserList').then(res => {
					if(res.status === 0){
						for(let i = 0 ; i < res.data.length ; i++){
							this.userOptions[i] = {}
							this.userOptions[i].value = res.data[i].id
							this.userOptions[i].label = res.data[i].name
						}
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 用户考勤月份切换
			userMonthChange(data){
				this.userQuery.year = data.year
				this.userQuery.month = data.month
				this.getUserAttendanceStat(this.userQuery, data)
				this.getUserAttendance(this.userQuery)
			},
			// 获取用户考勤统计信息
			getUserAttendanceStat(query, yearMonth = {year: this.userQuery.year, month: this.userQuery.month}){
				this.$store.dispatch('attendance/getUserAttendanceStat', query).then(res => {
					if (res.status === 0){
						if(res.data.length === 0){
							if(yearMonth.month < 10){
								yearMonth.month = '0' + yearMonth.month
							}
							this.uesrAttendanceInfo.nick_name = res.nick_name
							this.uesrAttendanceInfo.s_date = yearMonth.year + '-' + yearMonth.month
							this.uesrAttendanceInfo.s_office_day = 0
							this.uesrAttendanceInfo.s_overtime_day = 0
							this.uesrAttendanceInfo.s_rest_day = 0
							this.uesrAttendanceInfo.s_rest_all_day = 6
						}else{
							this.uesrAttendanceInfo = res.data[0]
						}
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 获取用户考勤信息
			getUserAttendance(query){
				this.$store.dispatch('attendance/getUserAttendance', query).then(res => {
					if(res.status === 0){
						this.userData = res.data
					} else {
						this.$message.error(res.message)
					}
				})
			},
			userBool(data){
				if(this.userData.length === 0){return false}
				for(let i = 0 ; i < this.userData.length ; i++){
					if(this.userData[i].day_date === data.formattedDate){
						data.userData = this.userData[i]
						return true
					}
				}
				return false
			},
			// 用户考勤表日期对应显示
			userShow(data){
				return this.userBool(data)
			},
			
			// ## // 部门考勤表
			// 选择部门表月份时触发
			departmentMonthChange(data){
				this.departmentYearMonth.year = data.year
				this.departmentYearMonth.month = data.month
				this.getDepartmentAttendance(this.departmentYearMonth)
			},
			// 选择部门触发
			departmentValueChangr(value){
				this.departmentYearMonth.department_id = value
				this.getDepartmentAttendance(this.departmentYearMonth)
			},
			// 获取部门列表
			getDepartmentList(){
				this.$store.dispatch('user/getDepartmentList').then(res => {
					if(res.res.status === 0){
						this.departmentOptions = res.arr
						this.departmentValue = parseInt(getUserDepartmentId())
						this.departmentYearMonth.department_id = getUserDepartmentId()
						this.getDepartmentAttendance(this.departmentYearMonth)
					} else {
						this.$message.error(res.res.message)
					}
				})
			},
			// 获取部门数据
			getDepartmentAttendance(query){
				this.$store.dispatch('attendance/getDepartmentAttendance', query).then(res => {
					if(res.status === 0){
						for (let i = 0; i < res.data[0].length; i++) {
							res.data[0][i].children = [[],[]]
							for (let j = 0; j < res.data[1].length; j++) {
								if (res.data[0][i].day_date === res.data[1][j].day_date) {
									if (res.data[1][j].office_status === 0) {
										res.data[0][i].children[0].push(res.data[1][j])
									} else {
										res.data[0][i].children[1].push(res.data[1][j])
									}
								}
							}
						}
						this.departmentData = res.data[0]
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 部门显示
			departmentShow(data){
				return this.bool(data, this.departmentData, 'day_date', 'office_number', 'rest_number')
			},
			
			// ## // 公司考勤表 
			// 公司考勤点击详情
			handleClick(data) {
				if(data.length === 0){
					this.$message.warning('该栏目没有数据可呈现')
				} else {
					this.visible = true
					this.drawerData = data
				}
			},
			// 抽屉确定框
			onClickConfirm() {
				this.visible = false;
			},
			// 公司考勤切换月份
			companyMonthChange(value) {
				this.getCompanyAttendance(value)
			},
			// 获取公司考勤
			getCompanyAttendance(query) {
				this.$store.dispatch('attendance/getCompanyAttendance', query).then(res => {
					console.log(res)
					if (res.status === 0) {
						for (let i = 0; i < res.data[0].length; i++) {
							res.data[0][i].children = [[],[]]
							for (let j = 0; j < res.data[1].length; j++) {
								if (res.data[0][i].c_day_date === res.data[1][j].day_date) {
									if (res.data[1][j].office_status === 0) {
										res.data[0][i].children[0].push(res.data[1][j])
									} else {
										res.data[0][i].children[1].push(res.data[1][j])
									}
								}
							}
						}
						for(let i = 0 ; i < res.data[0].length ; i++){
							res.data[0][i].children[0] = loot.arrayGroupBy(res.data[0][i].children[0], 'department_id')
							res.data[0][i].children[1] = loot.arrayGroupBy(res.data[0][i].children[1], 'department_id')
						}
						this.CompanyAttendanceData = res.data[0]
					} else {
						this.$message.error(res.message)
					}
				})
			},
			bool(data, arr, datStr, officeNumberStr, restNumberStr) {
				if (arr.length === 0) {
					return false
				}
				for (let i = 0; i < arr.length; i++) {
					if (arr[i][datStr] === data.formattedDate) {
						data.c_office_number = arr[i][officeNumberStr]
						data.success = 'success zero'
						data.c_office_number_title = '上班'
						data.c_rest_number = arr[i][restNumberStr]
						data.warning = 'warning zero'
						data.c_rest_number_title = '调休'
						data.children = arr[i].children
						return true
					}
				}
				return false
			},
			// 对应日期展示对应数据
			getShow(data) {
				return this.bool(data, this.CompanyAttendanceData, 'c_day_date', 'c_office_number', 'c_rest_number')
			},
			// 具体的日数
			displayNum(cellData) {
				if (cellData.mode === 'month') {
					return cellData.date.getDate();
				}
				return cellData.date.getMonth() + 1;
			}
		},
		created() {
			if(isButtonAuthority('查看公司考勤表')){
				this.tabsValue = 1
			} else if(isButtonAuthority('查看本部门考勤表') && !isButtonAuthority('查看公司考勤表')){
				this.tabsValue = 2
			} else {
				this.tabsValue = 3
			}
			let companyQuery = {
				year: dayjs().format('YYYY-MM-DD').slice(0, 4),
				month: parseInt(dayjs().format('YYYY-MM-DD').slice(5, 7))
			}
			this.getCompanyAttendance(companyQuery)
			this.getDepartmentList()
			this.getUserAttendance(this.userQuery)
			this.getUserAttendanceStat(this.userQuery)
			this.getUserList()
		}
	};
</script>

<style lang="less" scoped>
	.gray-template{
		opacity: 0.3;
		cursor: not-allowed;
	}
	
	.template{
		opacity: 1;
	}
	
	.outerWrapper {
		width: 100%;
		height: 100%;
		position: relative;
		font-weight: 400;

		.number {
			position: absolute;
			top: 3px;
			right: 5px;
			font-size: 14px;
		}
		
		.gray-number {
			position: absolute;
			top: 3px;
			right: 5px;
			font-size: 14px;
			color: #ccc;
		}
		
		.slotWrapper {
			position: absolute;
			top: 1.2rem;
			left: 5px;

			.item {
				position: relative;
				display: flex;
				align-items: center;
				color: rgba(0, 0, 0, 0.6);

				.zero {
					display: block;
					left: 1px;
					width: 5px;
					height: 5px;
					border-radius: 10px;
					margin-right: 4px;
				}

				.warning {
					background: #ed7b2f;
				}

				.success {
					background: #4A6CE7;
				}
				
				.restColor {
					background: #43CF7C;
				}
			}
		}
	}
</style>